<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <title>IT伐木累娱乐小平台</title>
    <link rel="stylesheet" href="./dist/css/bootstrap.min.css">

    <style type="text/css">
        div.chess {
            margin: 10px;
            border-radius: 10px;
            width: 20px;
            height: 20px;
            border: #8e8e8e 1px solid;
        }

        div.chess.black-chess {
            background-color: #0E2231;
        }

        div.chess.white-chess {
            background-color: whitesmoke;
        }

        div.chess.active {
            -webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;
            -webkit-box-shadow: 0 0 8px rgba(111, 1, 32, 3);
            box-shadow: 0 0 8px rgba(111, 1, 32, 3);
        }

        #roomMsg > li {
            margin-bottom : 15px;
            cursor: default;
        }

        /*#roomMsg>li>span{*/
            /*display: inline-block;*/
            /*text-align: left;*/
        /*}*/

        #roomMsg > li.text-right {
            padding-left : 35%;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top main-platform-content" id="navbar" style="display:none;">
    <div class="container-fluid" style="margin-left:50px;">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                IT Family五子棋对战平台
            </a>
        </div>
        <div style="margin-right : 30px;">
            <p class="navbar-text navbar-right">欢迎您, <span id="spUserName"></span> <a href="#"
                                                                                      style="color:lightseagreen">(点此退出)</a>
            </p>
        </div>
    </div>
</nav>
<div class="modal fade" id="userLogin" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">请输入一个昵称</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div id="userNameDiv" class="form-group">
                        <label for="userName" class="control-label">您的昵称</label>
                        <input maxlength="12" type="text" class="form-control" id="userName" placeholder="请输入一个昵称">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="doLogin">进入平台</button>
            </div>
        </div>
    </div>
</div>

<div id="sysNotice" class="modal fade" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-sm">
        <div class="modal-content" id="noticeContent">
            <script type="text/x-handlebars-template" id="noticeTpl">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">{{title}}</h4>
                </div>
                <div class="modal-body">
                    <h4 class="text-{{noticeType}}">{{content}}</h4>
                </div>
                <div class="modal-footer">
                    {{#if needYN}}
                    <button type="button" class="btn btn-default notice-no" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary notice-yes" data-dismiss="modal">确定</button>
                    {{else}}
                    <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
                    {{/if}}
                </div>
            </script>
        </div>
    </div>
</div>
<div class="jumbotron">
    <h1>欢迎来到IT Family五子棋对战平台</h1>

    <p>目前有四个房间可选</p>

    <p>请不要在工作时间进行游戏,谢谢您的配合</p>

    <p><a id="enterPlatform" class="btn btn-primary btn-lg" href="#" role="button" data-toggle="modal"
          data-target="#userLogin">进入平台</a></p>
</div>
<div class="container-fluid" style="margin-left:0;margin-right:0;">
    <div id="mainGomoku" class="row" style="display: none;">
        <div class="col-xs-12">
            <div class="page-header">
                <h4 id="playRoomName"></h4>
            </div>
        </div>
        <div class="col-xs-8">
            <div id="testcanvas" style="width:800px;height:800px;"></div>
        </div>
        <div class="col-xs-4">
            <div class="row" id="playersPanel">
                <script type="text/x-handlebars-template" id="roomPlayersTpl">
                    <div class="col-xs-6">
                        <div class="panel panel-{{panelDesc1}}">
                            <div class="panel-heading">{{p1.username}}</div>
                            <div class="panel-body">
                                <dl>
                                    <dt>本房间胜利次数</dt>
                                    <dd>{{p1rs}}</dd>
                                    <dt>历史累计对战得分</dt>
                                    <dd>{{p1.score}}</dd>
                                </dl>

                                {{#if colorDesc1}}
                                <div class="chess {{colorDesc1}}-chess {{activeDesc1}}"></div>
                                {{/if}}

                                {{#if canStart1}}
                                <div style="height:9px;"> </div>
                                <button type="button" class="btn btn-primary btn-block gomoku-game-start">游戏开始</button>
                                <div style="height:9px;"> </div>
                                {{/if}}
                                {{#if noStart1}}
                                <div class="alert alert-warning" style="margin-bottom:0" role="alert">尚未开始</div>
                                {{/if}}
                                {{#if isWait1}}
                                <div class="alert alert-warning" style="margin-bottom:0" role="alert">等待对方开始</div>
                                {{/if}}
                                {{#if isPlaying1}}
                                <div class="alert alert-info" style="margin-bottom:0" role="alert">{{playingDesc1}}</div>
                                {{/if}}
                                {{#if isStarted1}}

                                <div style="height:9px;"> </div>
                                <button type="button" class="btn btn-info gomoku-game-revert" data-pnum="1">悔棋</button>
                                <button type="button" class="btn btn-warning gomoku-game-lose" data-pnum="1">认输</button>
                                <button type="button" class="btn btn-default gomoku-game-draw" data-pnum="1">和棋</button>
                                <div style="height:9px;"> </div>
                                {{/if}}
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="panel panel-{{panelDesc2}}">
                            <div class="panel-heading">{{p2.username}}</div>
                            <div class="panel-body">
                                <dl>
                                    <dt>本房间胜利次数</dt>
                                    <dd>{{p2rs}}</dd>
                                    <dt>历史累计对战得分</dt>
                                    <dd>{{p2.score}}</dd>
                                </dl>

                                {{#if colorDesc2}}
                                <div class="chess {{colorDesc2}}-chess {{activeDesc2}}"></div>
                                {{/if}}

                                {{#if canStart2}}
                                <div style="height:9px;"> </div>
                                <button type="button" class="btn btn-primary btn-block gomoku-game-start">游戏开始</button>
                                <div style="height:9px;"> </div>
                                {{/if}}
                                {{#if noStart2}}
                                <div class="alert alert-warning" style="margin-bottom:0" role="alert">尚未开始</div>
                                {{/if}}
                                {{#if isWait2}}
                                <div class="alert alert-warning" style="margin-bottom:0" role="alert">等待对方开始</div>
                                {{/if}}
                                {{#if isPlaying2}}
                                <div class="alert alert-info" style="margin-bottom:0" role="alert">{{playingDesc2}}</div>
                                {{/if}}
                                {{#if isStarted2}}

                                <div style="height:9px;"> </div>
                                <button type="button" class="btn btn-info gomoku-game-revert">悔棋</button>
                                <button type="button" class="btn btn-warning gomoku-game-lose">认输</button>
                                <button type="button" class="btn btn-default gomoku-game-draw">和棋</button>
                                <div style="height:9px;"> </div>
                                {{/if}}
                            </div>
                        </div>
                    </div>
                </script>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <button type="button" class="btn btn-warning btn-block game-room-leave">离开房间</button>
                    <br>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">房间消息</div>
                        <div class="panel-body" style="height: 300px;overflow-y: scroll;" id="roomMsgScroll">
                            <ul class="list-unstyled" id="roomMsg">

                            </ul>
                        </div>
                        <div class="panel-footer">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="可以在此聊天..." id="chatInp">
                                <span class="input-group-btn">
                                    <button class="btn btn-success chat-send" type="button">
                                        <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
                                    </button>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row main-platform-content main-platform-room" style="display:none;">
        <div class="col-xs-12"><h3>请选择房间</h3></div>
    </div>
    <div class="row main-platform-content main-platform-room" id="rooms">
        <script id="roomTpl" type="text/x-handlebars-template">
            <div class="col-xs-3">
                <div class="panel {{panelStatus}}">
                    <div class="panel-heading">{{roomName}} ({{panelStatusDesc}})</div>
                    <div class="panel-body">
                        <dl>
                            <dt>对战状况</dt>
                            <dd>{{p1}} vs {{p2}}</dd>
                            <dt>观战人数</dt>
                            <dd>{{watchers.length}}人</dd>
                        </dl>

                        {{#if canPlay}}
                        <a class="btn btn-primary room-play" href="#" role="button" data-roomnum="{{roomNumber}}">加入</a>
                        {{/if}}
                        {{#if joined}}
                        {{else}}
                        <a class="btn btn-default room-watch" href="#" role="button"
                           data-roomnum="{{roomNumber}}">观战</a>
                        {{/if}}

                        {{#if canLeave}}
                        <a class="btn btn-warning room-leave" href="#" role="button"
                           data-roomnum="{{roomNumber}}">离开房间</a>
                        {{/if}}
                    </div>
                </div>
            </div>
        </script>
    </div>
</div>
</body>
</html>
<script data-main="main/mainGomoku" src="lib/requirejs.js" type="application/javascript"></script>